<template>
	<div id="home">
		<HomeHeader></HomeHeader>
		<HomeSwiper :swiperList="swiperList"></HomeSwiper>
		<HomeIcon :iconList="iconList"></HomeIcon>
		<HomeLocation></HomeLocation>
		<HomeHot></HomeHot>
		<HomeHotList :list="list"></HomeHotList>
		<HomeLike :lickList="lickList"></HomeLike>
	</div>
</template>

<script>
import HomeHeader from "./pages/header"
import HomeSwiper from "./pages/swiper"
import HomeIcon from "./pages/icon"
import HomeLocation from "./pages/location"
import HomeHot from "./pages/hot"
import HomeHotList from "./pages/hotlist"
import HomeLike from "./pages/like"

import {mapState} from "vuex"

export default {
	components:{
		HomeHeader,
		HomeSwiper,
		HomeIcon,
		HomeLocation,
		HomeHot,
		HomeHotList,
		HomeLike
	},
	data (){
		return {
			swiperList:[],
			iconList:[],
			list:[],
			lickList:[],
			changeaCity:""
		}
	},
	computed:{
		...mapState(["city"])
	},
	methods:{
		getHttp(){
				/*	  api===> http://localhost:8080/static/mock*/
			this.$http.get("/api/data/dataHome.json")
			.then((res)=>{
				var data=res.data.data;
	//			console.log(data);
	               data.forEach((item,index)=>{
	                  if(item.city==this.city){
	                  	    this.swiperList=item.swiperList;
							this.iconList=item.iconList;
							this.list=item.list;
							this.lickList=item.lickList;
	                  } 	
	               })
			})
		}
	},
	mounted (){
		  this.changeaCity=this.city
		  this.getHttp()
	},
	activated(){
		if(this.changeaCity!=this.city){
			this.getHttp();
			this.changeaCity=this.city	
		}
	}
	
}
	
	
</script>

<style>
body{
	background: #E4E7EA;
}
	
</style>